<template>
  <div>
    <el-dialog
      v-model="visible"
      title="调整价格"
      @before-ok="createOk"
      @close="close(updateRef)"
      width="700px"
      top="100px"
    >
      <div style="width: 600px">
        <el-form
          :model="updateForm"
          ref="updateRef"
          :rules="createRules"
          label-width="130px"
          size="default"
          v-loading="initLoading"
        >
          <el-form-item label="订单金额：" prop="order_pay_price">
            <el-input
              v-model="updateForm.order_pay_price"
              placeholder="请输入订单金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否包邮：" prop="express_free">
            <el-radio-group v-model="updateForm.express_free">
              <el-radio :label="1">包邮</el-radio>
              <el-radio :label="0">不包邮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="运费：" prop="express_price" v-if="!updateForm.express_free">
            <el-input
              v-model="updateForm.express_price"
              placeholder="请输入运费"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="flex center">
          <el-button @click="visible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnLoading"
            @click="createOk(updateRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script lang="ts">
export default {
  name: "storeOrderUpdate",
};
</script>
<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import type { FormInstance } from "element-plus";
import type { Result, ResultError } from "@/types";
import { getOrderDetail,updateOrderPrice } from "@/api/store/order";

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const visible = ref<boolean>(false);

const operationId = ref<number>(0);

const updateRef = ref<typeof FormInstance>();

const btnLoading = ref<boolean>(false);

const initLoading = ref<boolean>(true);

const toInit = () => {
  if (!operationId.value) {
    initLoading.value = false;
    return;
  }
  getOrderDetail({ id: operationId.value })
    .then((res: Result) => {
      visible.value = true;
      updateForm.value.order_pay_price = res.data.order_pay_price;
      updateForm.value.express_price = res.data.express_price;
      updateForm.value.express_free = res.data.express_free;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const expressPriceValid = (rule: any, value: any, callback: any) => {
  if (updateForm.value.express_free && updateForm.value.express_price) {
    callback("请输入运费!");
  } else {
    callback();
  }
};

const updateForm = ref({
  order_pay_price: "",
  express_price: "",
  express_free: 0,
});
const createRules: any = reactive({
  order_pay_price: [{ required: true, message: "订单金额不能为空！" }],
  express_price: [{ validator: expressPriceValid, trigger: "blur" }],
});

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      updateOrderPrice(Object.assign({
        id:operationId.value
      },updateForm.value)).then((res: Result) => {
            $message.success(res.message);
            close(formEl);
            emit("success");
            btnLoading.value = false;
          })
          .catch((err: ResultError) => {
            $utils.errorMsg(err);
            btnLoading.value = false;
          });
    }
  });
};

const open = (id: number = 0) => {
  initLoading.value = true;
  if (id != 0) {
    operationId.value = id;
  }
  nextTick(() => {
    toInit();
  });
};

const close = async (formEl: typeof FormInstance | undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
  visible.value = false;
};

defineExpose({ open });
</script>